<template>
  <div class="bg-grey">
    <div class="bg-white text-center font-xl py-2">赛事筛选</div>

    <div class="d-flex flex-wrap px-2 pt-2">
      <div class="rule" :class="{on: selected.includes(i)}" :style="{flexBasis: w}" :key="i" @click="select(i)" v-for="(l, i) in leagues">
        <a class="mx-3">{{l}}</a>
      </div>
    </div>

    <div class="btn-group px-4 mt-3">
      <a class="btn px-4" @click="toggle(1)">全选</a>
      <a class="btn px-4" @click="toggle(0)">反选</a>
    </div>

    <div class="d-flex mt-3">
      <a class="btn btn-lg btn-secondary grow b-no rad-0" @click="confirm(0)">取消</a>
      <a class="btn btn-lg btn-danger grow b-no rad-0" @click="confirm(1)">确定</a>
    </div>
  </div>
</template>

<script>
import { select } from '../../utils/arrays'

export default {
  name: 'leagues',
  props: ['value', 'size', 'visible'],
  data () {
    var selected = []
    var leagues = this.value.map((e, i) => {
      selected.push(i)
      return e
    })
    return {selected, leagues}
  },
  computed: {
    w () { return 100 / this.size + '%' }
  },
  methods: {
    confirm (input) {
      this.$emit('update:visible', false)
      if (input) {
        var {selected, leagues} = this
        this.$emit('input', leagues.filter((e, i) => selected.includes(i)))
      }
    },
    select (i) {
      this.selected = select(this.selected, i)
    },
    toggle (all) {
      var {selected, leagues} = this
      for (let i = 0; i < leagues.length; i++) {
        var idx = selected.indexOf(i)
        if (all) {
          if (idx == -1) {
            this.select(i)
          }
        } else {
          this.select(i)
        }
      }
    }
  }
}
</script>
